<template>
  <div>
    <el-card>
      <TitleLine title="基本信息">
        <div>
          <el-button type="primary" class="ml-5" @click="toEdit">编辑</el-button>

          <el-popover placement="right" width="300" trigger="manual" v-model="causeVisible">
            <div>
              <el-input
                type="textarea"
                rows="4"
                :maxlength="100"
                show-word-limit
                placeholder="请输入冻结理由(100字以内)"
                v-model.trim="freezeCause"
              ></el-input>
              <div class="flex mt-8 align-center justify-between">
                <p>确定冻结该企业主？</p>
                <div>
                  <el-button @click="doCancel"> 取消 </el-button>
                  <el-button type="primary" @click="doFreeze">确定</el-button>
                </div>
              </div>
            </div>
            <el-button
              :disabled="isFrezze"
              slot="reference"
              type="primary"
              class="ml-5"
              @click="causeVisible = true"
              >冻结</el-button
            >
          </el-popover>
        </div>
      </TitleLine>

      <div class="infoBox mb-20">
        <div class="infoBox-item mt-10" v-for="(item, index) in infoList" :key="index">
          <span>{{ item.lable }}：</span>
          <span>{{ item.value }}</span>
        </div>
      </div>

      <TitleLine title="营业执照（点击可查看大图）" />
      <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList" />
    </el-card>
  </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
export default {
  name: 'CompanyInfoDetailInfo',
  components: {},
  props: {},
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
      // 信息列表
      infoList: [
        { lable: '公司名称', value: 'F4', key: 'enterpriseName' },
        { lable: '营业执照号', value: 'X254234156', key: 'licenseNo' },
        { lable: '主营业务', value: '餐饮', key: 'businessScope' },
        { lable: '联系人', value: '张三', key: 'touchName' },
        { lable: '联系电话', value: '15555555555', key: 'touchMobile' },
        { lable: '联系地址', value: '露谷企业园F4', key: 'detailAddress' }
      ],
      // 是否冻结
      isFrezze: '',

      // 冻结弹窗是否显示
      causeVisible: false,
      // 冻结理由
      freezeCause: '',
      // 企业主信息
      etpInfo: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    // 获取企业主信息详情
    this.getUserInfo()
  },
  mounted() {},
  methods: {
    // 企业主资料刷新基础信息写入
    ...mapMutations('base', ['SET_INFO_REFRESH']),
    // 获取企业主内容
    ...mapActions('base', ['getEtpInfo']),
    // 获取企业主信息详情
    async getUserInfo() {
      try {
        const { data } = await this.getEtpInfo(this.$route.query.id)
        this.infoList = this.infoList.map(el => {
          const obj = { ...el }
          obj.value = data[el.key]
          return obj
        })
        this.etpInfo = data
        this.url = JSON.parse(data.licenseImg)[0]
        this.srcList = JSON.parse(data.licenseImg)
        this.isFrezze = data.etpVerify ? true : false
      } catch (error) {
        console.log('getUserInfo', error)
      }
    },

    // 冻结弹窗点击取消
    doCancel() {
      this.freezeCause = ''
      this.causeVisible = false
    },

    // 点击冻结
    doFreeze() {
      if (!this.freezeCause) return this.$message.error('请输入冻结理由')
      this.$http.user.company
        .editVerifyStatus({
          etpId: this.$route.query.id,
          reason: this.freezeCause,
          verifystatus: 4
        })
        .then(res => {
          if (res.status === 200) {
            this.$message.success('操作成功')
            this.freezeCause = ''
            this.causeVisible = false
            this.$emit('refreshInfo')
            this.SET_INFO_REFRESH(true)
            this.getUserInfo()
          }
        })
        .catch(err => {
          console.log('handleReject', err)
        })
    },

    // 点击编辑
    toEdit() {
      const { id, userId } = this.$route.query
      this.$router.push({
        name: 'CompanyEdit',
        query: {
          id,
          userId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.title-line-box {
  margin-top: 0;
}
</style>
